<template>
  <div class="plan">
    <div class="header">
      <span>预案类型</span>
      <select v-model="type">
        <option disabled value="">请选择</option>
        <option v-for="(type, i) of types" :key="i" :value="type">{{type}}</option>
      </select>
      <span>所属片区</span>
      <select v-model="area">
        <option disabled value="">请选择</option>
        <option v-for="(area, i) of areas" :key="i" :value="area">{{area}}</option>
      </select>
      <!-- <span>选择管道</span>
      <select v-model="resistance">
        <option disabled value="">请选择</option>
        <option v-for="(area, i) of resistances" :key="i" :value="area">{{area}}</option>
      </select> -->
      <span>备注关键字</span>
      <input type="text" v-model="content" placeholder="输入搜索内容" @keyup.enter="getList">
      <button @click="clickSearch">搜索</button>
      <button @click="clickUpdate">刷新</button>
      <button @click="clickSort">倒序</button>
      <button @click="clickPre">查看</button>
      <button @click="clickAdd">添加</button>
      <button @click="clickDel">删除</button>
      <button @click="clickEdit">修改</button>
    </div>
    <div class="list">
      <div class="item"
        :class="{selectedItem: selectedIndex === i}"
        v-for='(item, i) of list' :key='i'
        @click='clickItem(i)'
      >
        <div class="title">{{item.title}}</div>
        <div class="sub">
          <span>类型：{{item.type}}</span>
          <span>所属片区；{{item.area}}</span>
          <span>管理：{{item.resistance}}</span>
        </div>
      </div>
    </div>
    <el-pagination
      :page-size='10'
      :pager-count="7"
      :current-page.sync="page"
      layout="prev, pager, next"
      @current-change="changePage"
      :total="total">
    </el-pagination>
    <el-dialog :visible.sync="editShow" :modal="false">
      <div class="detail">
        <span>详情标题</span>
        <input v-model="detail.title">
        <span>作者</span>
        <input v-model="detail.author">
        <span>详情内容</span>
        <quill-editor v-model="detail.content"
          ref="myQuillEditor"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @ready="onEditorReady($event)">
        </quill-editor>
        <button style="margin-top: 100px;" @click="submit">提交</button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="preShow" :modal="false">
      <div>{{detail.title}}</div>
      <div v-html="detail.content" style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #d8d8d8;" />
    </el-dialog>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

let action = 'new'

export default {
  name: 'Test',
  components: {
    quillEditor
  },
  props: {},
  data() {
    return {
      total: 1, // 条目总数
      preShow: false, // 预览开关
      editorOption: {
        // some quill options
      },
      resistances: [], // 管道列表
      areas: [], // 地区列表
      types: [], // 类型列表
      list: [], // 主列表
      editShow: false, // 显示详情
      selectedIndex: -1, // 默认选中
      page: 1,
      content: '',
      type: '',
      area: '',
      resistance: '' // 管道
    }
  },
  computed: {
    // 当前详情
    detail() {
      return this.list[this.selectedIndex] || {}
    },
    // 获取列表参数集
    listParams() {
      return {
        page: this.page, // 页码
        size: 10, // 列表长度
        type: this.type, // 类型
        content: this.content, // 搜索内容
        area: this.area, // 地区
        resistance: this.resistance // 管道
      }
    }
  },
  mounted() {
    this.getList()
    this.getTypes()
    this.getAreas()
    this.getResistances()
  },
  methods: {
    clickPre() {
      this.preShow = true
    },
    changePage() {
      this.getList()
    },
    onEditorReady(e) {
      console.log(e)
    },
    onEditorFocus(e) {
      console.log(e)
    },
    onEditorBlur(e) {
      console.log(e)
    },
    getResistances() {
      this.$get({
        url: '/dispatch/api/message/getMessageAllResistance',
        params: {}
      }).then(data => {
        if (!data) return
        this.resistances = data
      })
    },
    getAreas() {
      this.$get({
        url: '/dispatch/api/message/getMessageAllArea',
        params: {}
      }).then(data => {
        if (!data) return
        this.areas = data
      })
    },
    getTypes() {
      this.$get({
        url: '/dispatch/api/message/getMessageAllType',
        params: {}
      }).then(data => {
        if (!data) return
        this.types = data
      })
    },
    getList() {
      this.list = []
      this.$get({
        url: '/dispatch/api/message/getPublishAll',
        params: { ...this.listParams }
      }).then(data => {
        if (!data) return
        this.list = data.content
        this.total = data.totalElements
      })
    },
    submit() {
      let url = '/dispatch/api/message/update'
      let data = this.detail
      if(action === 'new') {
        url = '/dispatch/api/message/insertPublish'
        data = {
          ...this.detail,
          area: this.area,
          type: this.type,
          resistance: this.resistance,
        }
      }

      this.$post({
        url,
        data,
      }).then(res => {
        if(!res) return
        this.editShow = false
        this.getList()
      })
    },
    initial() {
      this.selectedIndex = -1
    },
    clickItem(i) {
      this.selectedIndex = i
    },
    clickEdit() {
      action = 'edit'
      if(this.detail.title) this.editShow = true
    },
    clickDel() {
      // this.list.splice(this.selectedIndex, 1)
      // this.initial()
      if(!confirm('确定删除吗？')) return

      this.$httpDelete({
        url: '/dispatch/api/message/delete',
        params: {
          id: this.detail.id,
        }
      }).then(res => {
        if(!res) return
        // this.editShow = false
        this.initial()
        this.getList()
      })
    },
    clickAdd() {
      // if(!this.type || !this.area || !this.resistance) {
      //   alert('请选定地区、类型与管道')
      if(!this.type || !this.area) {
        alert('请选定地区、类型')
        return
      }
      action = 'new'
      this.initial()
      this.editShow = true
    },
    clickSort() {
      this.initial()
      this.list = this.list.reverse()
    },
    clickUpdate() {
      this.type = ''
      this.area = ''
      this.resistance = ''
      this.initial()
      this.getList()
    },
    clickSearch() {
      this.getList()
    },
    inputRemind(e) {
      console.log(e)
    }
  }
}
</script>

<style scoped>
.plan {
  border: 1px solid #d8d8d8;
  width: 100%;
  font-size: 14px;
}
.header {
  padding: 0;
}
.list {
  border-top: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
  max-height: 500px;
  overflow-y: scroll;
}
.item {
  cursor: pointer;
  border-bottom: 1px solid #d8d8d8;
  line-height: 30px;
}
.item:last-child {
  border: none;
}
.sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.selectedItem {
  background: rgba(0, 0, 0, 0.2);
}
.detail {
  display: flex;
  flex-direction: column;
}
textarea {
  resize: none;
  outline: none;
}
.quill-editor {
  height: 260px;
}
</style>
